<template>
  <div class="search">
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
       shape=round
    >
    <template #left>
       <van-icon name="arrow-left" @click="back" />
      </template>
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>

    <div class="history">
        <div class="s">历史搜索</div>
        <div><van-icon name="delete-o" /></div>
    </div>
<van-button type="default" class="icon4" size=small>默认按钮</van-button>
  </div>
</template>

<script>
import Vue from "vue";
import { Search } from "vant";
import { Icon } from 'vant';
import { Button } from 'vant';

Vue.use(Button);
Vue.use(Icon);
Vue.use(Search);
export default {
    data(){
        return{
            value:""
        }
    },
    methods:{
        onSearch(){
           
        },
        back(){
            this.$router.go(-1)
        }
    }
};
</script>

<style scoped lang="scss">
.history{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:.5556rem 1.1111rem ;
}
.s{
    font-size: .7778rem;
}
.icon4{
    margin-left: 1.1111rem;
}
</style>